<!-- Start Content-->
<div class="container-fluid" id="welcome">

    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-left mt-3">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="javascript: void(0);"><i class="feather icon-home"></i></a>
                        </li>
                        <li class="breadcrumb-item active">仪表盘</li>
                        <li class="breadcrumb-item active">工作台</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>


    <div class="row">
        <!-- first row widget start -->
        <div class="col-md-12 col-xl-12 page-header">
            <div class="card mb-2">
                <div class="card-body">
                    <div class="row">
                        <img src="/static/images/avatar.png" alt="超级管理员" class="rounded-circle avatar-image">
                        <div class="headerContent">
                            <div class="title">
                                <span class="date"></span>
                                <span class="name"></span>
                                <span class="welcome-text"></span>
                            </div>
                            <div>
                                使用golang写的一个小案例。
                            </div>
                        </div>

                        <div class="head-info row">
                            <div class="work">
                                <span>work experience</span>
                                <p>2015-至今</p>
                            </div>
                            <div class="running">
                                <span>already running</span>
                                <p class="time"><span>1</span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-12 col-xl-12">
            <!-- stastic widget starts -->
            <div class="row">
                <!-- widget start -->
                <div class="col-xl-4 col-md-6 ">
                    <div class="card overflow-hidden mb-2">
                        <div class="card-body">
                            <div class="d-flex align-items-center mt-n2">
                                <h5 class="m-0">总访问量</h5>
                                <div class="card-header-elements ml-auto">
                                    <div class="btn-group dropdown">
                                        <button type="button"
                                                class="btn btn-sm btn-default icon-btn borderless btn-round md-btn-flat dropdown-toggle hide-arrow"
                                                data-toggle="dropdown"><i class="ion ion-ios-more"></i></button>
                                        <div class="dropdown-menu dropdown-menu-right">
                                            <a href="javascript:" class="dropdown-item"><i
                                                        class="feather icon-maximize text-muted"></i> &nbsp; Full Screen</a>
                                            <a href="javascript:" class="dropdown-item"><i
                                                        class="feather icon-refresh-cw text-muted"></i> &nbsp;
                                                Reload</a>
                                            <a href="javascript:" class="dropdown-item"><i
                                                        class="feather icon-trash text-muted"></i> &nbsp; Remove</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="text-center my-2">
                                <h2 class="display-2 text-primary">154</h2>
                                <span class="text-muted">&emsp;</span>
                            </div>
                            <span class="text-muted mr-1">最近一周::</span>
                            <span class="text-dark">348</span>
                        </div>
                        <div class="progress mt-0 mb-0 progress-sm">
                            <div class="progress-bar bg-primary" role="progressbar" style="width: 75%; "
                                 aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6 ">
                    <div class="card overflow-hidden mb-2">
                        <div class="card-body">
                            <div class="d-flex align-items-center mt-n2">
                                <h5 class="m-0">文章量</h5>
                                <div class="card-header-elements ml-auto">
                                    <div class="btn-group dropdown">
                                        <button type="button"
                                                class="btn btn-sm btn-default icon-btn borderless btn-round md-btn-flat dropdown-toggle hide-arrow"
                                                data-toggle="dropdown"><i class="ion ion-ios-more"></i></button>
                                        <div class="dropdown-menu dropdown-menu-right">
                                            <a href="javascript:" class="dropdown-item"><i
                                                        class="feather icon-maximize text-muted"></i> &nbsp; Full Screen</a>
                                            <a href="javascript:" class="dropdown-item"><i
                                                        class="feather icon-refresh-cw text-muted"></i> &nbsp;
                                                Reload</a>
                                            <a href="javascript:" class="dropdown-item"><i
                                                        class="feather icon-trash text-muted"></i> &nbsp; Remove</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="text-center my-2">
                                <h2 class="display-2 text-success">145</h2>
                                <span class="text-muted">&emsp;</span>
                            </div>
                            <span class="text-muted mr-1">最近一周:</span>
                            <span class="text-dark">48</span>
                        </div>
                        <div class="progress mt-0 mb-0 progress-sm">
                            <div class="progress-bar bg-success" role="progressbar" style="width: 72%; "
                                 aria-valuenow="72" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6">
                    <div class="card overflow-hidden mb-2">
                        <div class="card-body">
                            <div class="d-flex align-items-center mt-n2">
                                <h5 class="m-0">评论量</h5>
                                <div class="card-header-elements ml-auto">
                                    <div class="btn-group dropdown">
                                        <button type="button"
                                                class="btn btn-sm btn-default icon-btn borderless btn-round md-btn-flat dropdown-toggle hide-arrow"
                                                data-toggle="dropdown"><i class="ion ion-ios-more"></i></button>
                                        <div class="dropdown-menu dropdown-menu-right">
                                            <a href="javascript:" class="dropdown-item"><i
                                                        class="feather icon-maximize text-muted"></i> &nbsp; Full Screen</a>
                                            <a href="javascript:" class="dropdown-item"><i
                                                        class="feather icon-refresh-cw text-muted"></i> &nbsp;
                                                Reload</a>
                                            <a href="javascript:" class="dropdown-item"><i
                                                        class="feather icon-trash text-muted"></i> &nbsp; Remove</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="text-center my-2">
                                <h2 class="display-2 text-warning">{{.commentCount.Total}}</h2>
                                <span class="text-muted">&emsp;</span>
                            </div>
                            <span class="text-muted mr-1">最近一周:</span>
                            <span class="text-dark">{{.commentCount.Day7}}</span>
                        </div>
                        <div class="progress mt-0 mb-0 progress-sm">
                            <div class="progress-bar bg-warning" role="progressbar" style="width: 55%; "
                                 aria-valuenow="55" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- stastic widget end -->
        </div>

        <!-- first row widget end -->
        <!-- second row widget start -->
        <div class="col-xl-8">
            <div class="card">
                <div class="card-body">
                    <h4 class="header-title">最新文章</h4>
                    <table id="basic-datatable" class="table dt-responsive nowrap" width="100%">
                        <thead>
                        <tr>
                            <th>标题</th>
                            <th>阅读数</th>
                            <th>创建时间</th>
                            <th>修改时间</th>
                            <th>详情</th>
                        </tr>
                        </thead>
                        {{if .lastArticle}}
                            <tbody>
                            <tr>
                                <td>{{.lastArticle.Title}}</td>
                                <td>{{.lastArticle.View}}</td>
                                {{if .lastArticle.CreatedTime}}
                                    <td>{{.lastArticle.CreatedTime.Format "2006-01-02 15:04:05"}}</td>
                                {{end}}
                                {{if .lastArticle.UpdateTime}}
                                    <td>{{.lastArticle.UpdateTime.Time.Format "2006-01-02 15:04:05"}}</td>
                                {{else}}
                                    <td>&emsp;</td>
                                {{end}}
                                {{if .lastArticle.Markdown}}
                                    <td>
                                        <a href="/article/details/markdown?id={{.lastArticle.Id}}&title={{.lastArticle.Title}}">详情</a>
                                    </td>
                                {{else}}
                                    <td><a href="/article/details?id={{.lastArticle.Id}}&title={{.lastArticle.Title}}">详情</a>
                                    </td>
                                {{end}}
                            </tr>
                            </tbody>
                        {{else}}
                            <tbody>
                            <tr>
                                <td colspan="7">
                                    <div class="ant-empty ant-empty-normal">
                                        <div class="ant-empty-image">
                                            <svg width="64" height="41" viewBox="0 0 64 41"
                                                 xmlns="http://www.w3.org/2000/svg">
                                                <g transform="translate(0 1)" fill="none" fillRule="evenodd">
                                                    <ellipse fill="#F5F5F5" cx="32" cy="33" rx="32"
                                                             ry="7"></ellipse>
                                                    <g fillRule="nonzero" stroke="#D9D9D9">
                                                        <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
                                                        <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z"
                                                              fill="#FAFAFA"></path>
                                                    </g>
                                                </g>
                                            </svg>
                                        </div>
                                        <p class="ant-empty-description">暂无数据</p></div>
                                </td>
                            </tr>
                            </tbody>
                        {{end}}
                    </table>
                </div>
            </div>
        </div>
        <div class="col-xl-4">
            <div class="card ui-activity-card">
                <div class="card-body">
                    <h5 class="mt-0 mb-3">最近评论</h5>
                    {{if ge (.latelyFiveComment|len) 0}}
                        <div class="ui-activity-list">
                            {{range $i, $v := .latelyFiveComment}}
                            <div class="row py-3">
                                <div class="col-auto text-right update-meta">
                                    <i class="bg-success update-icon ring"></i>
                                </div>
                                <img src="{{$v.AvatarUrl}}" alt="" data-toggle="tooltip"class="btn text-white btn-icon" title="{{$v.Name}}">
                                <div class="col pl-2">
                                    <h5 class="m-0">{{$v.Title}}</h5>
                                    <p class="mb-0">{{$v.Content}}<a href="http://127.0.0.1/article/{{$v.ArticleId}}" target="_blank" class="text-c-green"> 查看</a>
                                    </p>
                                </div>
                            </div>
                            {{end}}
                        </div>
                    {{else}}
                        <h5 class="text-warning text-center">还没有用户参与评论!</h5>
                    {{end}}
                </div>
            </div>
        </div>
    </div>
</div>